<script setup lang="ts">
  import { computed } from 'vue'
  import type { Tag } from '@/types/blog'

  interface Props {
    tags: (Tag & { id: string })[]
  }

  const props = defineProps<Props>()

  const emit = defineEmits<{
    'tag-click': [tag: Tag & { id: string }]
  }>()

  // 计算标签大小（基于数量）
  const processedTags = computed(() => {
    if (!props.tags.length) return []

    const maxCount = Math.max(...props.tags.map(tag => tag.count))
    const minCount = Math.min(...props.tags.map(tag => tag.count))
    const range = maxCount - minCount || 1

    return props.tags.map(tag => ({
      ...tag,
      size: 0.8 + ((tag.count - minCount) / range) * 0.6, // 0.8 - 1.4rem
      opacity: 0.7 + ((tag.count - minCount) / range) * 0.3, // 0.7 - 1.0
    }))
  })

  const handleTagClick = (tag: Tag & { id: string }) => {
    emit('tag-click', tag)
  }
</script>

<template>
  <div class="popular-tags">
    <div v-if="processedTags.length === 0" class="empty-state">
      <p>暂无标签</p>
    </div>

    <div v-else class="tags-cloud">
      <button
        v-for="tag in processedTags"
        :key="tag.name"
        class="tag-item"
        :style="{
          fontSize: `${tag.size}rem`,
          opacity: tag.opacity,
          '--tag-color': tag.color,
        }"
        :class="{ 'has-custom-color': tag.color }"
        @click="handleTagClick(tag)"
      >
        <span class="tag-name">{{ tag.name }}</span>
        <span class="tag-count">({{ tag.count }})</span>
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .popular-tags {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
  }

  .empty-state {
    text-align: center;
    color: var(--text-secondary);

    p {
      margin: 0;
      font-size: 0.9rem;
    }
  }

  .tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-start;
  }

  .tag-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.9rem;

    &:hover {
      transform: translateY(-2px) scale(1.05);
      box-shadow: var(--shadow-md);
      color: white;
    }

    // 有自定义颜色的标签hover效果
    &.has-custom-color:hover {
      background: var(--tag-color);
      border-color: var(--tag-color);
    }

    // 没有自定义颜色的标签hover效果
    &:not(.has-custom-color):hover {
      background: var(--primary-color);
      border-color: var(--primary-color);
    }

    &:active {
      transform: translateY(-1px) scale(1.02);
    }
  }

  .tag-name {
    font-weight: 500;
  }

  .tag-count {
    font-size: 0.8em;
    opacity: 0.8;
    font-weight: 400;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .popular-tags {
      padding: 1rem;
    }

    .tags-cloud {
      gap: 0.5rem;
    }

    .tag-item {
      padding: 0.4rem 0.6rem;
      font-size: 0.85rem;
    }
  }

  @media (max-width: 480px) {
    .tag-item {
      padding: 0.3rem 0.5rem;
      font-size: 0.8rem;
    }
  }
</style>
